<script setup lang="ts">
import { RefreshFilled } from '@vicons/material'
import { ref } from 'vue'
import { NIcon } from 'naive-ui'

defineProps<{
  element?: Element
}>()

const inAnimation = ref(false)
let timer = null
// 刷新整个页面
const refresh = () => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    inAnimation.value = true
    window.location.reload()
  }, 300)
}
</script>

<template>
  <NIcon
    :size="30"
    :class="inAnimation ? 'rotating' : 'icon-mid'"
    @animationend="inAnimation = false"
    @click="refresh"
  >
    <RefreshFilled />
  </NIcon>
</template>
<style scoped lang="scss">
.icon-mid {
  cursor: pointer;
}
.rotating {
  display: inline-block;
  animation-name: rotating;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
